<template>
  <div class="sql-authorization">
    <div class="content">
      <je-text-area
        v-model:value="sqlValue"
        placeholder="当快速授权不满足时，可以在当前SQL权限中自定义SQL来控制数据权限，如业务中出现负责人(字段FZDID)信息，业务中需要让负责人也可以看见，可在这里配置：
      FZRID ='{@USER_ID@}"
        class="my-textarea"
      >
      </je-text-area>
    </div>
    <div class="footer">
      <div>
        <je-button type="primary" :disabled="btnDisabled" class="btn" @click="save"
          >保存刷新</je-button
        >
        <je-button class="btn" :disabled="btnDisabled" @click="reset">恢复数据</je-button>
        <je-button class="btn" @click="closeEvent">关闭</je-button></div
      >
      <div
        ><span>数据权限与功能whereSql的关系:</span
        ><je-select
          v-model:value="WhereSqlValue"
          :options="WhereSqlOptions"
          :allow-clear="false"
          style="width: 70px; margin: 0 10px"
          @change="changeWhereSqlValue"
        ></je-select
      ></div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, onMounted, ref, watch } from 'vue';

  import { Input, Button, Modal } from '@jecloud/ui';

  import { doSaveApi, getPremDataApi } from '@/api/authorization';

  import { useDialog } from '@/hooks/use-dialog';

  import { JE_DATAAUTHORITY_WhERRSQLOPTIONS } from '@/helper/constant';

  export default defineComponent({
    name: 'SQLAuthorization',
    components: {
      JeTextArea: Input.TextArea,
      JeButton: Button,
    },
    props: {
      currentFuncId: {
        type: String,
        default: '',
      },
      currentFuncCode: {
        type: String,
        default: '',
      },
      parentModal: String,
    },
    emits: ['isChange', 'changeSqlValueStatus'],
    setup(props, { emit }) {
      // 文本域值
      const sqlValue = ref('');
      let meta = {}; //对比项
      const btnDisabled = ref(false); // 按钮禁用
      const funcId = ref(''); // id
      const funcCode = ref(''); // code
      //数据权限与功能WhereSql的关系:
      const WhereSqlOptions = JE_DATAAUTHORITY_WhERRSQLOPTIONS;
      const WhereSqlValue = ref('');
      const defaultWhereSqlValue = ref('');
      // 保存
      const save = () => {
        // 如果数据改变了，后续代码才继续运行
        if (isChange()) return Modal.notice('无数据操作!', 'info');
        btnDisabled.value = true;
        // 保存接口
        doSaveApi({
          tableCode: 'JE_CORE_FUNCPERM',
          FUNCPERM_FUNCINFO_CODE: funcCode.value,
          FUNCPERM_FUNCINFO_ID: funcId.value,
          FUNCPERM_TYPE: 'sqlAuth',
          FUNCPERM_COVER_VALUE: WhereSqlValue.value,
          FUNCPERM_CONFIG: sqlValue.value,
        }).then((res) => {
          Modal.notice(res.message, 'success');
          if (sqlValue.value) {
            // 对比项重新赋值
            meta = JSON.parse(JSON.stringify(sqlValue.value));
          } else {
            meta = null;
          }
          // defaultWhereSqlValue.value = JSON.parse(JSON.stringify(WhereSqlValue.value));
          btnDisabled.value = false;
          emit('changeSqlValueStatus', WhereSqlValue.value);
        });
      };

      // 回显
      onMounted(() => {
        funcId.value = props.currentFuncId;
        funcCode.value = props.currentFuncCode;
        // 获取页面数据
        if (!funcId.value) return false;
        GetPremData();
      });

      // 对比是否的改变
      const isChange = () => {
        // if (btnDisabled.value) return true;
        // if (!meta && !sqlValue.value) {
        //   return true;
        // }
        const btnFlag = JE.isNotEmpty(btnDisabled.value);
        const valueFlag = (!meta && !sqlValue.value) || meta === sqlValue.value;
        const isSqlTrue = defaultWhereSqlValue.value == WhereSqlValue.value;
        // return meta === sqlValue.value && isSqlTrue;
        return btnFlag && valueFlag && isSqlTrue;
      };

      // 恢复数据
      const reset = () => {
        Modal.confirm('您确定要恢复数据吗？', () => {
          GetPremData();
        });
      };

      // 初始化数据
      const GetPremData = () => {
        btnDisabled.value = true;
        getPremDataApi({
          tableCode: 'JE_CORE_FUNCPERM',
          FUNCPERM_FUNCINFO_ID: funcId.value,
          FUNCPERM_TYPE: 'sqlAuth',
        }).then((res) => {
          sqlValue.value = res[0]?.values?.FUNCPERM_CONFIG || '';

          WhereSqlValue.value = res[0]?.values?.FUNCPERM_COVER_VALUE || '';
          defaultWhereSqlValue.value = JSON.parse(JSON.stringify(WhereSqlValue.value));
          if (sqlValue.value) {
            // 对比项赋值
            meta = JSON.parse(JSON.stringify(sqlValue.value));
          } else {
            meta = null;
          }
          btnDisabled.value = false;
        });
      };

      // 切换tab的回调
      const changeTabCb = () => {
        const flag = isChange();
        if (flag) return emit('isChange', flag);
        // 弹框
        useDialog({ toReset: GetPremData, save });
      };

      // 关闭
      const closeEvent = () => {
        props.parentModal.close();
      };
      return {
        sqlValue,
        save,
        reset,
        btnDisabled,
        closeEvent,
        changeTabCb,
        WhereSqlValue,
        defaultWhereSqlValue,
        WhereSqlOptions,
      };
    },
  });
</script>

<style lang="less" scoped>
  .sql-authorization {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 20px;
    border: 1px solid #d7d7d7;
    background: #edf0f4;
    justify-content: space-between;
    align-items: start;
    .my-textarea {
      height: 100% !important;
    }
    .footer {
      width: 100%;
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn {
        margin-right: 15px;
      }
    }
    .content {
      margin-top: 20px;
      padding: 10px 16px;
      width: 100%;
      height: 100%;
      background: #fff;
    }
  }
</style>
